<template>
    <div class="search-wrapper flex-row-center">
        <a-input :value="modelValue" :placeholder="placeholder" @change="handleChange">
            <template #suffix>
                <div><SearchOutlined class="search"/></div>
            </template>
        </a-input>
    </div>
</template>
  
<script setup>
import { SearchOutlined } from '@ant-design/icons-vue';
defineProps({
    modelValue: { type: String, default: '' },
    placeholder: { type: String, default: '请输入搜索内容' },
});

const emits = defineEmits(['update:modelValue']);

const handleChange = (e) => {
    emits('update:modelValue', e.target.value);
};
</script>
  
<style lang="scss" scoped>
.search-wrapper {
    width: 198px;
    height: 34px;
    margin: 0 20px;
    .search{
        color: var(--themeColor);
    }
}
</style>
  